<template>
    <div class="page-content">
        <entity-manager apiPrefix="/sys/dict" :fields="fields" ref="entityManagerRef" operationsWidth="180px" :withNew="false">
            <template #buttons>
                <el-button type="primary" icon="plus" @click="showNew">新增</el-button>
            </template>
            <template #rowButtons="{ row }">
                <el-link type="primary" @click="goDetail(row)" class="mr-2" v-perm="'update'" icon="Memo">详情</el-link>
                <el-link type="danger" v-show="row.status" class="mr-2" @click="updateStatus(row, 0)" v-perm="'update'" icon="Remove">停用</el-link>
                <el-link type="success" v-show="!row.status" class="mr-2" @click="updateStatus(row, 1)" v-perm="'update'" icon="Check">启用</el-link>
                <el-link type="danger" @click="doDelete(row)" class="mr-2" v-perm="'delete'" icon="Delete">删除</el-link>
            </template>
        </entity-manager>

        <dict-detail v-model="detailVisible" v-if="detailVisible" class="full-panel" :item="editingItem" @reload="reload" />
    </div>
</template>

<script setup name="sysDict">
import dictDetail from "./dict-detail.vue";
import * as sysApis from "@/apis/sys";
import { ElMessage } from "element-plus";
import * as _ from "lodash";
import { useSysStore } from "@/store/index";

const fields = [
    { label: "编码", prop: "code", required: true },
    { label: "名称", prop: "name", required: true },
    {
        label: "状态",
        prop: "status",
        width: "80px",
        needNew: false,
        tagType: (val) => {
            return {
                text: val ? "启用" : "停用",
                type: val ? "success" : "danger",
            };
        },
    },
    { label: "备注", prop: "remark" },
    { label: "创建时间", prop: "createTime", width: "200px", needNew: false },
];
const entityManagerRef = ref();
const detailVisible = ref(false);
const sysStore = useSysStore();

function reload() {
    entityManagerRef.value.reload();
    app.https.post("/sys/dict/query").then((resp) => {
        let dictInfo = {};
        resp.forEach((item) => {
            dictInfo[item.code] = item;
        });

        sysStore.setDictInfo(dictInfo);
    });
}

function showNew() {
    editingItem.value = null;
    detailVisible.value = true;
}

const editingItem = ref();
function goDetail(row) {
    editingItem.value = row;
    detailVisible.value = true;
}

function doDelete(row) {
    entityManagerRef.value.doDelete(row);
}

function updateStatus(row, status) {
    sysApis
        .updateDict({
            id: row.id,
            status,
        })
        .then(() => {
            row.status = status;
            ElMessage.success("操作成功");
        });
}
</script>

<style lang="scss" scoped>
.page-content {
    box-sizing: border-box;
}
</style>
